<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //让div运动
        //原理:通过offsetLeft来获取当前位置,设置给left,并通过定时器不断循环
        //offsetXXX可以返回当前对象的计算后的位置,比较常用
        window.onload = function () {
            let oDiv = document.getElementById('div1');
            alert(oDiv.offsetLeft); //0

            setInterval(function () {
                oDiv.style.left = oDiv.offsetLeft + 5 + 'px'
            },10);
            setTimeout(function () {
                alert(oDiv.offsetLeft); //2秒后div的位置
            },2000)

        }


    </script>
    <style>
        #div1 {
            height: 100px;
            width: 100px;
            background: bisque;
            top: 20px;
            left: 0px;
            position: absolute; /*需要设置为相对位置!*/
        }
    </style>
</head>

<body>

<div>
    <div id="div1"></div>

</div>

</body>
</html>